<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: laikt
 * @Date: 2020-12-30 16:27:02
 * @LastEditors: laikt
 * @LastEditTime: 2021-03-29 16:23:34
-->
<template>
    <div class="home">
        <div class="table"></div>
        <div class="directive">
            <button v-copy="copyText">复制</button>
            <button v-debounce="debounceClick">防抖</button>
            <div class="el-dialog" v-draggable></div>
        </div>
        <table-compontent
            api="WAIT_ADUDIT_ORDER"
            code="manger:user"
            :isDefaultSearch="false"
            :tableData="tableData"
            :settingColumns="columns"
            :settingSearch="settingSearch"
            :searchValue="searchValue"
            export
        >
            <el-button type="primary" @click="visible = true">
                新增
            </el-button>

            <el-form
                slot="settingSearch"
                :model="searchValue"
                ref="form"
                label-width="80px"
                inline
                class="is-thin search"
            >
                <el-form-item label="名称" prop="name">
                    <el-input
                        v-model="searchValue.name"
                        placeholder="名称"
                    ></el-input>
                </el-form-item>
                <el-form-item class="table-search-actions">
                    <el-button type="primary" @click="onSubmit">
                        立即创建
                    </el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
            <template v-slot:name="scope">
                <p @click="audit(scope)">{{ scope.row.name }}</p>
            </template>
            <template v-slot:created_at="scope">
                <p @click="audit(scope)">
                    {{ scope.row.created_at }}
                </p>
            </template>
        </table-compontent>

        <el-dialog title="科目" center :visible.sync="visible" width="900px">
            <form-component
                ref="form"
                :formSetting="{ labelWidth: '140px' }"
                :setting="setting"
                :model="model"
            >
            </form-component>
            <div slot="footer" class="dialog-footer">
                <el-button @click="visible = false" round>取 消</el-button>
                <el-button type="primary" round @click="subimt">
                    确 定
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import utils from '@/utils'
export default {
    name: 'home',
    components: {
        // HelloWorld
    },
    data() {
        return {
            copyText: 'a copy directives',
            imgsrc:
                'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa4.att.hudong.com%2F27%2F67%2F01300000921826141299672233506.jpg&refer=http%3A%2F%2Fa4.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1612580721&t=32413fab668af50b329d7beb8e19e7c3',
            searchValue: {
                name: '1'
            },
            tableData: [
                {
                    orderno: '111111',
                    name: '张三',
                    branch: '西安',
                    origin_price: 100,
                    price: 80,
                    class_hour: 50,
                    status: '已审核',
                    operater: '李四',
                    created_at: 1616142412,
                    audit_at: 1616142412
                }
            ],
            visible: false,
            model: {}
        }
    },
    computed: {
        setting() {
            return [
                {
                    prop: 'category',
                    default: '',
                    label: '课程分类',
                    rule: [
                        { required: true, message: '必填', trigger: 'blur' }
                    ],
                    col: { span: 12 },
                    render: () => (
                        <select-option
                            clearable
                            placeholder="课程分类"
                            vModel={this.model.category}
                            params={{ code: 'manger:user' }}
                            formmat={{
                                value: 'prop',
                                label: 'label'
                            }}
                            axios="GET_TABBLECOLUMN"></select-option>
                    )
                },
                {
                    prop: 'title',
                    default: '',
                    label: '科目标题',
                    rule: [
                        { required: true, message: '必填', trigger: 'blur' }
                    ],
                    col: { span: 12 },
                    render: () => (
                        <el-input
                            v-model={this.model.title}
                            placeholder="科目标题"></el-input>
                    )
                },
                {
                    prop: 'status',
                    default: '',
                    label: '状态',
                    rule: [
                        { required: true, message: '必填', trigger: 'blur' }
                    ],
                    col: { span: 12 },
                    render: () => (
                        <el-radio-group v-model={this.model.status}>
                            <el-radio label={0}>审核</el-radio>
                            <el-radio label={1}>正常</el-radio>
                        </el-radio-group>
                    )
                }
            ]
        },
        settingSearch() {
            return [
                {
                    prop: 'parent_tel',
                    label: '名称',
                    default: '',
                    render: () => (
                        <el-input
                            v-model={this.searchValue.parent_tel}
                            clearable
                            placeholder="手机号"></el-input>
                    )
                },
                {
                    prop: 'status',
                    default: '',
                    render: () => (
                        <select-option
                            clearable
                            placeholder="状态"
                            vModel={this.searchValue.status}
                            data={this.dateList}></select-option>
                    )
                },
                {
                    prop: 'branch',
                    default: '',
                    render: () => (
                        <select-option
                            clearable
                            placeholder="校区"
                            vModel={this.searchValue.branch}
                            params={{ code: 'manger:user' }}
                            formmat={{
                                value: 'prop',
                                label: 'label'
                            }}
                            axios="GET_TABBLECOLUMN"></select-option>
                    )
                }
            ]
        },
        columns() {
            return [
                {
                    prop: 'name',
                    render: ({ row }) => (
                        <span
                            style="cursor:pointer;color:#4778E9"
                            onClick={() => this.getDetail(row)}>
                            {row.name}
                        </span>
                    )
                },
                {
                    prop: 'origin_price',
                    // label: '订单原价',
                    formatter: row => {
                        return typeof row.origin_price !== 'undefined'
                            ? '￥' + row.origin_price
                            : ''
                    }
                },
                {
                    prop: 'price',
                    formatter: row => {
                        return typeof row.real_price !== 'undefined'
                            ? '￥' + row.real_price
                            : ''
                    }
                },
                {
                    prop: 'created_at',
                    formatter: row =>
                        utils.time.format(
                            row.created_at * 1000,
                            'YYYY/MM/DD HH:mm:ss'
                        )
                },
                {
                    prop: 'audit_at',
                    formatter: row =>
                        utils.time.format(
                            row.audit_at * 1000,
                            'YYYY/MM/DD HH:mm:ss'
                        )
                },
                {
                    prop: 'action',
                    render: ({ row }) => (
                        <div class="table-row-action-flex">
                            <el-button
                                type="text"
                                // v-permission={['finance:audit:adopt']}
                                onClick={() => this.audit(row)}>
                                通过
                            </el-button>
                            <el-button
                                type="text"
                                // v-permission={['finance:audit:refuse']}
                                onClick={() => this.delete(row)}>
                                删除
                            </el-button>
                        </div>
                    )
                }
            ]
        }
    },
    methods: {
        subimt() {
            this.$refs.form.submit().validate(res => {
                if (res) {
                    console.log(res)
                }
            })
        },
        onSubmit() {
            console.log(this.searchValue)
        },
        // 表格
        audit(row) {
            console.log(row)
        },
        delete(row) {
            console.log(row)
        },
        getDetail(row) {
            console.log(row)
        },
        // 防抖事件
        debounceClick() {
            console.log('只触发一次')
        }
    }
}
</script>
